<template>
  <h1>{{ pos.x }} == {{ pos.y }}</h1>
  <div class="box2" :style="{
    left: pos.x - 50 + 'px',
    top: pos.y - 50 + 'px'
  }"></div>
</template>
<!-- // setup作为script的属性 是 setup函数的语法糖 -->
<script setup>
// 引入子组件

import {
  onBeforeMount, onMounted,
  onBeforeUpdate, onUpdated, ref, onBeforeUnmount
} from "vue";
let pos = ref({
  x: 0,
  y: 0
})
let dom = ref(null)
const move = (e) => {
  pos.value.x = e.pageX
  pos.value.y = e.pageY
}
onMounted(() => {
  document.addEventListener('mousemove', move)
})
onBeforeUnmount(() => document.removeEventListener('mousemove', move))
</script>
<script>
export default {
  name: "App"
}
</script>
<style>
.box2 {
  width: 100px;
  height: 100px;
  background-color: #f9f;
  position:absolute
}
</style>


